<template>
  <div>
    <el-drawer title="订单导出" v-model="visible" :size="600">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">订单导出</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="100px"
          require-asterisk-position="right"
          :validate-on-rule-change="false"
        >
          <el-form-item label="导出范围" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio :label="0">所有订单</el-radio>
              <el-radio :label="1">已选中订单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="导出模板" prop="templateId">
            <el-select
              v-model="form.templateId"
              placeholder="请选择模板"
              class="custom-select"
              clearable
              filterable
            >
              <el-option
                v-for="option in tableData"
                :key="option.id"
                :label="option.name"
                :value="option.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="drawer-footer">
          <el-button class="w-[108px] h-[45px] rounded-[10px] text-[12px]" @click="hide">
            取消
          </el-button>
          <el-button
            class="w-[108px] h-[45px] rounded-[10px] text-[12px]"
            type="primary"
            color="#3721ff"
            @click="onSubmit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import * as ExportApi from '@/api/mall/trade/export'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { FormInstance } from 'element-plus'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import download from '@/utils/download'

const { loadStart, loadDone } = usePageLoading()

const message = useMessage() // 消息弹窗
const emit = defineEmits(['updateRemark'])
interface RemarkInfo {
  type: 0 | 1
  orderNo: number[]
  templateId: number | undefined
  sort: 'DESC' | 'ASC'
}

const props = defineProps({
  selectedRows: {
    type: Array,
    default: () => []
  }
})

const form = ref<RemarkInfo>({
  type: 0,
  orderNo: [],
  templateId: undefined,
  sort: 'DESC'
})

const formRef = ref<FormInstance | null>(null)

const orderNo = ref<any[]>([])

const visible = ref(false)

const total = ref(0)

const tableData = ref([])

const rules = {
  type: [{ required: true, message: '请选择导出类型', trigger: 'change' }],
  templateId: [{ required: true, message: '请选择导出模板', trigger: 'change' }]
}

/**
 * 提交备注
 */
const onSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      // emit('updateRemark', form.value)
      try {
        // 导出的二次确认
        // await message.exportConfirm()
        // 发起导出

        if (form.value.type === 1) {
          if (props.selectedRows.length === 0) {
            message.error('请选择订单')
            return
          }
          orderNo.value = props.selectedRows.map((item) => item.orderNo)
        }
        loadStart()
        const queryData = {
          orderNo: orderNo.value,
          templateId: form.value.templateId,
          sort: form.value.sort
        }
        const data = await TradeOrderApi.exportOrderExcel(queryData)
        download.excel(data, '订单列表.xls')
      } catch {
      } finally {
        loadDone()
      }
      visible.value = false
    }
  })
}

const init = async () => {
  try {
    const res = await ExportApi.getExportList()
    tableData.value = res
  } finally {
  }
}

onMounted(() => {
  init()
})

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
:deep(.el-select__wrapper) {
  height: 40px !important;
}
:deep(.el-input__wrapper) {
  height: 40px !important;
}
:deep(.el-button) {
  height: 39px !important;
  border-radius: 6px !important;
}
</style>
